<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      .box1 {
        background: red;
        display: none;
      }
      .box2 {
        background: skyblue;
        display: none;
      }
      .box3 {
        background: pink;
        display: none;
      }
    </style>
  </head>
  <body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1">111</div>
    <div class="box2">222</div>
    <div class="box3">333</div>
    <script>
      var boxs = document.querySelectorAll("div");
      var btns = document.querySelectorAll("button");
      // 方式一 通过let let 配合for循环的独特应用
      // let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响
      //   for (let i = 0; i < btns.length; i++) {
      //     //用var 声明的话 不管按哪个键结果都是3 因为循环结束的时候i值会覆盖
      //     btns[i].onclick = function () {
      //       for (var key = 0; key < boxs.length; key++) {
      //         if (key == i) {
      //           boxs[key].style.display = "block";
      //         } else {
      //           boxs[key].style.display = "none";
      //         }
      //       }
      //     };

      //   }

      // 二通过自执行函数、//自执行函数有自己的作用域
      for (var i = 0; i < btns.length; i++) {
        (function (i) {
          //这里的i仅在本作用域内
          btns[i].onclick = function () {
            for (var key = 0; key < boxs.length; key++) {
              if (key == i) {
                boxs[key].style.display = "block";
              } else {
                boxs[key].style.display = "none";
              }
            }
          };
        })(i);
      }

      // 三、绑定对象上
      console.time();
      for (var i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onclick = function () {
          // console.log(i);
          // console.log(btns[i].index);
          // console.log(btns[i])
          console.log(this.index);
        };
      }
      console.timeEnd();
    </script>
  </body>
</html>
